<template>
  <nav-start v-if="!isVisible" />
  <nav-other v-else />
  <router-view />
  <Foot v-if="visibleFooter"/>
</template>

<script lang="ts" setup>
import { onMounted, onUnmounted, ref, watch } from "vue";
import navStart from "@/components/nav/navStart.vue";
import NavOther from "@/components/nav/navOther.vue";
import Foot from "@/components/foot/myFoot.vue";
import { useRoute } from "vue-router";
// import "@/assets/js/sakura"

const route = useRoute();
const isVisible = ref(false);
const visibleFooter = ref(true);

watch(
  () => route.path,
  (newPath) => {
    if (newPath == "/") {
      visibleFooter.value = true;
    } else {
      visibleFooter.value = false;
    }
  }
);

const scrollTop = () => {
  let scroll = document.documentElement.scrollTop || document.body.scrollTop;
  if (scroll > 0) {
    isVisible.value = true;
  } else {
    isVisible.value = false;
  }
};

onMounted(() => {
  window.addEventListener("scroll", scrollTop, true);
});

onUnmounted(() => {
  window.removeEventListener("scroll", scrollTop);
});
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
</style>
